<template>
  <div> 
    <div style="height: 50px; background-color: #ffffff" class="tabbxos" v-if="tabShow">
      <div class="tabones"  @click="tabto('indexs')">
        <img class="tabonesimg" v-if="topobjs.name=='indexs'" src="@/assets/img/table/home_show.svg" alt="">
        <img class="tabonesimg" v-else src="@/assets/img/table/home.svg" alt="">
        

        <span class="tabonesText  " :class="topobjs.name=='indexs'?'tabonesTextShow':''">首页</span>
      </div>
      <div class="tabones" @click="tabto('SchoolListTab')">
        <img class="tabonesimg" v-if="topobjs.name=='SchoolListTab'" src="@/assets/img/table/school_show.svg" alt="">

        <img class="tabonesimg" v-else src="@/assets/img/table/school.svg" alt="">
        <span class="tabonesText" :class="topobjs.name=='SchoolListTab'?'tabonesTextShow':''">学校管理</span>
      </div>
      <div class="tabones" @click="tabto('wo')">
        <img class="tabonesimg" v-if="topobjs.name=='wo'"  src="@/assets/img/table/me_show.svg" alt="">

        <img class="tabonesimg" v-else  src="@/assets/img/table/me.svg" alt="">
        <span class="tabonesText" :class="topobjs.name=='wo'?'tabonesTextShow':''">我的</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useMutitabsStore } from "@/store/mutitabs";
import { getStorage } from "@/utils/util";

const route = useRoute();
const router = useRouter();
const mutitabsStore = useMutitabsStore();

let user = ref({});
let topobjs = ref({});
let tabShow = ref(false);
let tablist = ref(['indexs', 'wo', 'SchoolListTab']);

// 动态加载菜单
let allmenu = ref(JSON.parse(getStorage("allmenu")));

// 获取当前路由信息
function rotnamesObjs() {
  let tabsPage =
    typeof mutitabsStore.tabsPage === "string"
      ? JSON.parse(mutitabsStore.tabsPage)
      : mutitabsStore.tabsPage;

  // 查找当前路由对应的对象
  let objs = tabsPage.find((item) => item.name === route.name) || {};
  topobjs.value = route;

  // 判断是否显示底部导航栏
  console.log(tabShow,'---------tabShow')
  tabShow.value = tablist.value.some((item) => item === route.name);
  console.log(tabShow.value,route,'------------------1')
}

// 路由跳转
const tabto = (name) => {
  router.push({ name });
};

// 监听路由变化
watch(
  route,
  (newRoute) => {
    console.log("当前路由对象:", newRoute);
    rotnamesObjs();
  },
  { immediate: true, deep: true }
);

// 初始化
onMounted(async () => {
  user.value = JSON.parse(mutitabsStore.userinfo);
  rotnamesObjs();
});
</script>
 <style lang="scss" scoped>
.tabbxos {
  display: flex;
  padding-bottom: 20px;
  padding-top: 3px;
  
  .tabones {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 12px;
    color: #8e929d;
    align-items: center;
    margin-top: 3px;
  }
  .tabonesimg{
    height: 20px; 
    width: auto;
  }
  .tabonesText{
    margin-top: 8px;
  }
  .tabonesTextShow{
    color: #22BF57;
  }
}
</style>